<script setup>
import { ref, reactive } from 'vue';
</script>

<template>
	<el-col>
		<el-menu style="width: 100px;" active-text-color="#ffd04b" background-color="black" class="el-menu-vertical-demo "
			default-active="2" text-color="#fff" router>
			<div class="logo-center">
				<img src="./img/admin_logo_small.png" style="width: 50px;" alt="">
			</div>

			<el-menu-item index="/home/list">
				<el-button style="background-color: black; color: white; border: 0;padding-left: 0;">
					<el-icon>
						<HomeFilled />
					</el-icon>
					<span>主页</span>
				</el-button>
			</el-menu-item>
			<el-menu-item index="/user/list">
				<el-popover placement="right" trigger="hover">
					<template #reference>
						<el-button style="background-color: black; color: white; border: 0;padding-left: 0;">
							<el-icon>
								<User />
							</el-icon>
							<span>用户</span>
						</el-button>
					</template>
					<el-menu-item index="/user/list">用户管理</el-menu-item>
					<el-menu-item index="/user/group">用户分组</el-menu-item>
					<el-menu-item index="/user/label">用户标签</el-menu-item>
					<el-menu-item index="/user/level">用户等级</el-menu-item>
				</el-popover>
			</el-menu-item>
			<el-menu-item index="/order/list">
				<el-popover placement="right" trigger="hover">
					<template #reference>
						<el-button style="background-color: black; color: white; border: 0;padding-left: 0;">
							<el-icon>
								<ShoppingCart />
							</el-icon>
							<span>订单</span>
						</el-button>
					</template>
					<el-menu-item index="/order/list">订单管理</el-menu-item>
					<el-menu-item index="/order/refund">售后订单</el-menu-item>
					<el-menu-item index="/order/setting">核销订单</el-menu-item>
					<el-menu-item index="/order/offline">收银订单</el-menu-item>
				</el-popover>
			</el-menu-item>
			<el-menu-item index="/product/list">
				<el-popover placement="right" trigger="hover">
					<template #reference>
						<el-button style="background-color: black; color: white; border: 0;padding-left: 0;">
							<el-icon>
								<ShoppingBag />
							</el-icon>
							<span>商品</span>
						</el-button>
					</template>
					<el-menu-item index="/product/list">商品管理</el-menu-item>
					<el-menu-item index="/product/classify">商品分类</el-menu-item>
					<el-menu-item index="/product/attr">商品规格</el-menu-item>
					<el-menu-item index="/product/reply">商品评论</el-menu-item>
				</el-popover>
			</el-menu-item>
		</el-menu>
	</el-col>
</template>

<style>
.logo-center {
	display: flex;
	justify-content: center;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 100px;
	height: 100%;
}
</style>